<template>
  <div class="left-main">
    <!---左边部分-->
    <div class="fav-sidenav">
      <el-collapse v-model="activeNames">
        <el-collapse-item title="我的创建" name="1">
          <el-scrollbar max-height="250px">
            <div class="nav-title" @click="updateMenuItem(undefined)">
              <span class="iconfont icon-htmal5icon18 span-color"></span>
              <span title="创建收藏夹">新建收藏夹</span>
            </div>
            <!--菜单排序组件-->
            <draggable :list="myFavorites" item-key="id" :animation="100" :sort='true' :move="onMove" filter=".forbid" handle=".mover" @end="onEnd">
              <template #item="{ element }">
                <div class="components-body" :class="[{clickMenu:clickMenu == element.id},{'forbid':(element.favoritesRank==1)}]"
                     @click="favoritesItem=element;showFavoritesVideo(element.id,pageNum);clickMenuCommon('1',element.id)"
                     @mouseover="cursorShowIndex = element.id" @mouseout="cursorShowIndex = -1">
                  <div class="mover">
                    <span title="拖动排序" class="iconfont icon-liebiao1 span-menu-btn" v-show="cursorShowIndex == element.id"></span>
                  </div>
                  <span :class="[{clickMenuSpan:clickMenu == element.id},'iconfont item-color-margin',(element.favoritesPublicCopy==1)?'icon-nongchanpinzhiboshangpinshu':'icon-simizhibo']"></span>
                  <span class="components-body-span">{{element.favoritesNameCopy}}</span>
                  <el-popover
                      placement="right"
                      popper-class="el-popover-self"
                      trigger="hover">
                    <template #reference>
                      <div>
                        <!---->
                        <span class="components-body-right-span more-menu" v-show="cursorShowIndex != element.id">{{element.favoritesCount}}</span>
                        <!---->
                        <span class="more-menu" v-show="cursorShowIndex == element.id">
                          <span class="iconfont icon-caidan caidan-size" title="跟多操作"></span>
                        </span><!---->
                      </div>
                    </template>
                    <ul class="ul-dropdown-item">
                      <li class="be-dropdown-item-delimiter" @click="this.updateFavoritesId = element.id;updateMenuItem(element)">编辑信息</li>
                      <li class="be-dropdown-item-delimiter" v-show="element.favoritesRank != 1"
                          @click="deleteDialogVisible = true;tempFavoritesId = element.id">删除</li>
                    </ul>
                  </el-popover>
                </div>
              </template>
            </draggable>
          </el-scrollbar>
        </el-collapse-item>
        <el-collapse-item title="我的收藏和订阅" name="2">
          <div class="menu-null" v-show="false">空</div>
          <el-scrollbar max-height="250px">
            <div :class="['components-body',{clickSubscribeMenu:clickSubscribeMenu == element.id}]" @mouseover="cursorSubShowIndex = element.id" @mouseout="cursorSubShowIndex = -1"
                 @click="clickMenuCommon('2',element.id)" v-for="element in subscribeList" :key="element">
              <span :class="['iconfont icon-shoucangjiazuopinshu span-dingyue',{clickSubscribeMenuSpan:clickSubscribeMenu == element.id}]"></span>
              <span class="components-body-span">{{element.subscribeName}}</span>
              <el-popover
                  placement="right"
                  popper-class="el-popover-self"
                  trigger="hover">
                <template #reference>
                  <div>
                    <!---->
                    <span class="components-body-right-span more-menu" v-show="cursorSubShowIndex != element.id">{{element.subscribeItemCount}}</span>
                    <!---->
                    <span class="more-menu" v-show="cursorSubShowIndex == element.id">
                       <span class="iconfont icon-caidan caidan-size" title="跟多操作"></span>
                    </span><!---->
                  </div>
                </template>
                <ul class="ul-dropdown-item">
                  <li class="be-dropdown-item-delimiter" @click="cancelSubscribe">取消订阅</li>
                </ul>
              </el-popover>
            </div>
          </el-scrollbar>
        </el-collapse-item>
      </el-collapse>
      <!--话题菜单-->
      <div :class="['components-body',{clickSubscribeMenu:clickSubjectMenu == element.id}]" @click="clickMenuCommon('3',element.id)" v-for="element in subjectList" :key="element.id">
        <span :class="['iconfont icon-gongsizhidu span-dingyue',{clickSubscribeMenuSpan:clickSubjectMenu == element.id}]"></span>
        <span class="components-body-span">{{element.subjectName}}</span>
        <span class="components-body-right-span">{{(element.subjectItemCount===undefined)?'0':element.subjectItemCount}}</span>
      </div>
      <!--稍后再看-->
      <div class="components-body components-body-late" style="">
        <span class="components-body-span">稍后再看</span>
      </div>
    </div>

    <!---右边部分-->
    <div class="fav-main section">
      <!--顶部部分-->
      <div class="favList-info">
        <div class="favInfo-box">
          <div class="shadow-first" v-if="stackDisplay"></div>
          <div class="shadow-second" v-if="stackDisplay"></div>
          <a href="#" target="_blank" class="favInfo-cover">
            <img :src="favoritesItem.imgBase64" alt="" v-if="(favoritesItem.imgBase64===''||favoritesItem.imgBase64==null)?false:true"/>
          </a>
          <div class="favInfo-details">
            <a href="" target="_blank" class="fav-name">{{favoritesItem.favoritesName}}</a>
            <div class="fav-meta">
              <span class="fav-up-name">创建者：{{ ($store.state.userInfo === '')?'':$store.state.userInfo.nickName}}</span>
              <span>播放次数：1</span>
            </div>
            <div class="fav-meta">
              <span>{{totalCount}}个内容</span>
              <span class="dot">·</span>
              <span>{{favoritesItem.favoritesPublicCopy=='1'?'公开':'私密'}}</span>
            </div>
            <div class="fav-options defaultFav">
              <a href="" target="_blank" :class="['fav-play-main',(totalCount==0)?'fav-play-copy':'fav-play']">
                <i class="iconfont icon-bofang"></i>
                播放全部视频
              </a>
              <div class="meta" v-show="totalCount!=0">
                <i class="iconfont icon-dianzan_selected"></i>
                <span class="metespan">点赞</span><!---->
              </div><!---->
              <div class="meta" v-show="totalCount!=0">
                <i class="iconfont icon-fenxiang"></i>
                <span class="metespan">分享</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--收搜部分-->
      <div class="fav-header fav-header-info">
        <div class="fav-info clearfix">
          <div class="fav-filters clearfix">
            <div class="filter-item do-batch">
              <span class="text">批量操作</span>
            </div>
            <div class="be-dropdown filter-item">
              <span>全部分区<i class="iconfont icon-xiangxia item-icon-style"></i></span>
            </div>
            <div class="be-dropdown filter-item">
              <span>最近收藏<i class="iconfont icon-xiangxia item-icon-style"></i></span>
            </div>
            <div class="filter-item search">
              <div class="be-dropdown search-types">
                <div>当前<i class="iconfont icon-xiangxia item-icon-style"></i></div>
              </div>
              <div class="search-input">
                <input type="text" placeholder="输入关键词" class="search-fav-input space_input"/>
                <span title="点击搜索" class="iconfont icon-search search-btn"></span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--视频列表部分-->
      <div class="fav-content section">
        <ul class="fav-video-list clearfix content" style="list-style: none">
          <li class="small-item" v-for="(item,index) in favoritesVideoList" :key="index">
            <a ref="#" target="_blank" class="cover cover-normal">
              <div class="b-img">
                <img :src="require('/src/assets/img/wangzhe.jpg')"/>
              </div>
              <span class="length" v-if="videoDuration != index">2:12</span>
              <span class="i-watchlater" v-if="videoDuration == index" @click="addWatchLater(item)"></span>
              <div class="meta-mask" @mouseover="videoDuration = index" @mouseout="videoDuration = -1">
                <div class="meta-info">
                  <p  class="view">播放：{{item.views}}</p>
                  <p class="favorite">收藏：{{item.stars}}</p>
                  <p class="textHidden">UP主：{{item.nickName}}</p>
                  <p class="pubdate">投稿：{{item.contributeTime}}</p>
                </div>
              </div>
              <div class="disabled-cover">
                <p>视频已失效</p>
              </div>
            </a>
            <a target="_blank" href="//www.bilibili.com/video/BV1r94y1N7hG/" :title="item.title" class="title">{{item.title}}</a>
            <div class="meta pubdate">
              收藏于： {{item.collectTime}}
            </div>
            <div class="be-dropdown-trigger">
              <i title="更多操作" class="iconfont icon-caidan"></i>
            </div>
          </li>
        </ul>
      </div>
      <!--分页-->
      <div class="pagination">
        <div class="pagination-auto">
          <el-config-provider :locale="zhCn">
            <el-pagination
                background
                @current-change="handleCurrentChange"
                prev-text="上一页" next-text="下一页"
                :total="totalCount" :page-size="pageSize" hide-on-single-page/>
          </el-config-provider>
        </div>
      </div>
    </div>
  </div>

  <!--新建、修改 收藏夹弹出框-->
  <el-dialog @close="dialogClose" v-model="centerDialogVisible" title="收藏夹信息" width="27%" center>
    <el-form
        label-position="top"
        label-width="100px"
        :model="formLabelAlign"
        width="200"
        ref="ruleFormRef"
        :rules="rules">
      <!--   封面裁剪   -->
      <el-dialog v-model="centerDialogCover" title="编辑封面" width="45%"
                 :show-close="false"
                 :close-on-press-escape="false"
                 :close-on-click-modal="false"
                 append-to-body
                 center>
        <div>
          <span class="cover-span-one">建议上传高清封面≥960*600</span>
          <span class="cover-span-two">格式jpeg、png，文件大小≤5MB</span>
        </div>
        <div class="cover-main">
          <div class="cover-main-cropper">
            <vueCropper ref="cropper"
                        :img="option.img"
                        :outputSize="option.outputSize"
                        :outputType="option.outputType"
                        :info="option.info"
                        :canScale="option.canScale"
                        :autoCrop="option.autoCrop"
                        :autoCropWidth="option.autoCropWidth"
                        :autoCropHeight="option.autoCropHeight"
                        :fixed="option.fixed"
                        :fixedNumber="option.fixedNumber"
                        :full="option.full"
                        :fixedBox="option.fixedBox"
                        :canMove="option.canMove"
                        :canMoveBox="option.canMoveBox"
                        :original="option.original"
                        :centerBox="option.centerBox"
                        :height="option.height"
                        :infoTrue="option.infoTrue"
                        :maxImgSize="option.maxImgSize"
                        :enlarge="option.enlarge"
                        @realTime="realTime"/>
          </div>
          <div style="float: right;">
            <div class="show-preview" :style="{'width': previews.w + 'px', 'height': previews.h + 'px',  'overflow': 'hidden'}">
              <div :style="previews.div">
                <img :src="previews.url" :style="previews.img">
              </div>
            </div>
            <div class="cover-bom">
              收藏夹封面效果展示
            </div>
          </div>
        </div>
        <div style="margin: 10px 0">
          <el-upload ref="reuploadCover"
                     action="#"
                     :auto-upload="false"
                     :multiple="false"
                     :limit="1"
                     accept=".jpg,.jpeg,.png,.JPEG,.PNG"
                     :on-change="handleChangeTwo">
            <span class="cover-reselect"><i class="iconfont icon-xunhuan"></i>重新选择</span>
          </el-upload>
        </div>
        <div class="modal-footer">
          <div class="btn cancel-btn" @click="goBack">返回上一级</div>
          <div class="btn confirm-btn" @click="cropImageStart">确定</div>
        </div>
      </el-dialog>
      <el-form-item label="收藏夹封面">
        <el-upload ref="uploadFavoritesCover"
                   action="#"
                   :auto-upload="false"
                   :multiple="false"
                   :limit="1"
                   accept=".jpg,.jpeg,.png,.JPEG,.PNG"
                   :on-change="handleChangeOne"
        >
          <div class="upload-cover" :style="{backgroundImage:'url('+bgImg+')'}"></div>
        </el-upload>
      </el-form-item>
      <el-form-item label="收藏夹名称" prop="favoritesName">
        <el-input v-model="formLabelAlign.favoritesName" placeholder="收藏夹名称" maxlength="20" show-word-limit/>
      </el-form-item>
      <el-form-item label="简介">
        <el-input v-model="formLabelAlign.favoritesIntroduction" :rows="5" type="textarea" placeholder="可填写简介"
                  maxlength="200" show-word-limit/>
      </el-form-item>
      <el-checkbox v-model="formLabelAlign.favoritesPublic">公开收藏夹</el-checkbox>
    </el-form>
    <span style="display: flex">
        <el-button style="margin: auto" type="primary" @click="onSubmit">
          提交
        </el-button>
      </span>
  </el-dialog>

  <!--删除收藏夹弹出框-->
  <el-dialog v-model="deleteDialogVisible" title="确认提示" width="20%" center>
    <div class="deletedialog">
      确定删除这个收藏夹吗？
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="deleteFavorites">确定</el-button>
        <el-button @click="deleteDialogVisible = false">取消</el-button>
      </span>
    </template>
  </el-dialog>

  <!--提示信息弹出框-->
  <show-message ref="showCoinsMessage"></show-message>
</template>

<script>
import ShowMessage from "@/components/showMessage";
import zhCn from 'element-plus/es/locale/lang/zh-cn'
//导入draggable组件
import draggable from 'vuedraggable'
// 图片裁剪组件 组件内使用
import 'vue-cropper/dist/index.css'
import { VueCropper }  from "vue-cropper";

export default {
  /**收藏组件**/
  name: "collectionPage",
  components: {ShowMessage,draggable,
    // eslint-disable-next-line vue/no-unused-components
    VueCropper},
  data() {
    return {
      fileList:[],
      imageUrl: '',
      // 分页组件显示中文
      zhCn,
      // 新建收藏夹弹出框
      centerDialogVisible: false,
      // 删除收藏夹弹出框
      deleteDialogVisible: false,
      // 我的收藏夹
      myFavorites: [],
      // 其他收藏夹
      othersFavorites: [],
      // 用于删除时收藏夹id与当前被选中收藏夹id做判断
      tempFavoritesId: {},
      // 新建收藏夹
      formLabelAlign: {},
      rules: {
        favoritesName: [
          {required: true, message: '请输入收藏夹名称', trigger: 'blur'},
          {min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur'}
        ],
      },
      stackDisplay: false,
      totalCount:0,
      pageSize:20,
      pageNum: 1, /* 当前页 */
      // 各收藏夹里的视频集合
      favoritesVideoList:[],
      // 记录每次点击的收藏夹id
      favoritesId:'',
      // 点击编辑时记录编辑对象id
      updateFavoritesId:'',
      videoDuration:-1,
      // 临时收藏夹对象
      favoritesItem:{},
      clickMenu:1,
      clickSubscribeMenu:-1,
      clickSubjectMenu:-1,
      cursorShowIndex:-1,
      cursorSubShowIndex:-1,
      activeNames:'1',
      // 话题菜单list
      subjectList:[
        {id:1,subjectName:'话题收藏夹',subjectItemCount:'0'},
        {id:2,subjectName:'专题收藏夹',subjectItemCount:'0'},
        {id:3,subjectName:'图文收藏夹',subjectItemCount:'0'},
        {id:4,subjectName:'课程收藏夹',subjectItemCount:'0'},
        {id:5,subjectName:'我的笔记本',subjectItemCount:'0'},
      ],
      // 我的收藏和订阅list
      subscribeList:[
        {id:1,subscribeName:'【科技观察】',subscribeItemCount:'0'},
        {id:2,subscribeName:'单集故事',subscribeItemCount:'0'},
        {id:3,subscribeName:'骨头社故事绘',subscribeItemCount:'0'},
        {id:4,subscribeName:'高等数学讲座',subscribeItemCount:'0'},
        {id:5,subscribeName:'100个he',subscribeItemCount:'0'},
        {id:6,subscribeName:'某某视频',subscribeItemCount:'0'},
        {id:7,subscribeName:'某某视频',subscribeItemCount:'0'},
        {id:8,subscribeName:'某某视频',subscribeItemCount:'0'},
        {id:9,subscribeName:'某某视频',subscribeItemCount:'0'},
        {id:10,subscribeName:'某某视频',subscribeItemCount:'0'},
      ],
      favoritesForbid:false,
      bgImg:'',
      defaultbgImg:'',
      centerDialogCover:false,
      previews: {},
      option: {
        img: "",
        name: "",
        outputSize: 1, //裁剪生成图片的质量(可选0.1 - 1)
        outputType: "png", //裁剪生成图片的格式（jpeg || png || webp）
        info: false, //图片大小信息
        canScale: false, //图片是否允许滚轮缩放
        autoCrop: true, //是否默认生成截图框
        autoCropWidth: 288, //默认生成截图框宽度
        autoCropHeight: 180, //默认生成截图框高度
        fixed: true, //是否开启截图框宽高固定比例
        fixedNumber: [1.6, 1], //截图框的宽高比例
        /**full: true按原比例裁切图片，当图片过大时图片生成会较慢*/
        full: true, //false按原比例裁切图片，不失真
        fixedBox: false, //固定截图框大小，不允许改变
        canMove: true, //上传图片是否可以移动
        canMoveBox: true, //截图框能否拖动
        original: false, //上传图片按照原始比例渲染
        centerBox: true, //截图框是否被限制在图片里面
        height: false, //是否按照设备的dpr 输出等比例图片
        infoTrue: true, //true为展示真实输出图片宽高，false展示看到的截图框宽高
        maxImgSize: 3000, //限制图片最大宽度和高度
        enlarge: 1, //图片根据截图框输出比例倍数
        // mode: "100% 100%", //图片默认渲染方式
      },

    }
  },
  created() {
    this.initmyFavorites(true,this.$store.state.userInfo.userId)
  },
  mounted() {
  },
  methods: {
    // TODO 当移入收藏视频的“稍后再看”图标时，会和“视频时间”图标发生来回闪烁。
    // 测试
    kozhi(){
      this.clickMenu = 5030
      // 查询收藏夹对象（名称，封面base64，公开）
      // this.favoritesItem = data
      this.showFavoritesVideo(5030,this.pageSize)
    },
    // 图片在浏览器上传成功
    handleChangeOne(file, fileList) {
      if (file.raw.type !== 'image/png' && file.raw.type !== 'image/jpeg' && file.raw.type !== 'image/jpg' && file.raw.type !== 'image/bmp'){
        this.$refs.showCoinsMessage.showErrorMsg('文件格式不符合')
        this.$refs['uploadFavoritesCover'].clearFiles();//清除文件
        return
      }
      if (file.size / 1024 / 1024 > 5) {
        this.$refs.showCoinsMessage.showErrorMsg('文件大小需要小于5MB')
        this.$refs['uploadFavoritesCover'].clearFiles();//清除文件
        return
      }
      this.option.img = URL.createObjectURL(file.raw);
      this.option.name = file.raw.name
      this.centerDialogCover = true
      this.$refs['uploadFavoritesCover'].clearFiles();//清除文件
      // URL → Blob 的映射，但 Blob 本身仍驻留在内存中，浏览器无法释放它。映射在文档卸载时自动清除，因此 Blob 对象随后被释放。但是，如果应用程序寿命很长，那不会很快发生。因此，如果我们创建一个 Blob URL，即使不再需要该 Blob，它也会存在内存中。
      // 针对这个问题，我们可以调用 URL.revokeObjectURL(url) 方法，从内部映射中删除引用，从而允许删除 Blob（如果没有其他引用），并释放内存。
      URL.revokeObjectURL(file.raw)
    },
    // 重新选择图片上传
    handleChangeTwo(file, fileList) {
      if (file.raw.type !== 'image/png' && file.raw.type !== 'image/jpeg' && file.raw.type !== 'image/jpg' && file.raw.type !== 'image/bmp'){
        this.$refs.showCoinsMessage.showErrorMsg('文件格式不符合')
        this.$refs['reuploadCover'].clearFiles();//清除文件
        return
      }
      if (file.size / 1024 / 1024 > 5) {
        this.$refs.showCoinsMessage.showErrorMsg('文件大小需要小于5MB')
        this.$refs['reuploadCover'].clearFiles();//清除文件
        return
      }
      this.option.img = URL.createObjectURL(file.raw);
      this.option.name = file.raw.name
      this.$refs['reuploadCover'].clearFiles();//清除文件
      URL.revokeObjectURL(file.raw)
    },
    // 开始截图
    cropImageStart(){
      this.$refs.cropper.startCrop()
      this.$refs.cropper.getCropBlob( blob => {
        // blob转base64
        const imgData = new FileReader();
        imgData.readAsDataURL(blob);
        imgData.onload = (e) => {
          const base64 = e.target.result
          // console.log('data',base64)
          this.bgImg = base64
        }
      })
      this.centerDialogCover = false
    },
    // 返回上一级
    goBack(){
      this.centerDialogCover = false
      this.cropImageClear()
    },
    // 清除截图
    cropImageClear() {
      this.$refs.cropper.clearCrop()
    },
    // 实时预览
    realTime(data) {
      this.previews = data
    },
    // 改变菜单样式
    clickMenuCommon(type,id){
      switch (type) {
        case '1':
          this.clickSubscribeMenu = -1
          this.clickSubjectMenu =  -1
          this.clickMenu = id
          break
        case '2':
          this.clickMenu = -1
          this.clickSubjectMenu = -1
          this.clickSubscribeMenu = id
          break
        case '3':
          this.clickMenu = -1
          this.clickSubscribeMenu = -1
          this.clickSubjectMenu = id
          break
      }
    },
    //禁止拖动到默认收藏夹上方
    onMove(e){
      // console.log('333',e.relatedContext.element.id);
      if(e.relatedContext.element.favoritesRank==1) {
        this.favoritesForbid = true
        return false;
      }
      return true;
    },
    // 拖拽结束事件
    async onEnd(){
      if (this.favoritesForbid) {
        this.favoritesForbid = false
        return
      }
      let str = "";
      for (let i = 0; i < this.myFavorites.length; i++) {
        str += this.myFavorites[i].id+ ",";
      }
      //去掉最后一个逗号
      if (str.length > 0) {
        str = str.substr(0, str.length - 1);
      }
      console.log('ids',str)
      let res = await this.$util.get('hilihili/favorites/updateFavoritesRank', {ids:str})
      if (res.code != 200){
        this.$refs.showCoinsMessage.showErrorMsg(res.msg)
        return
      }
      this.$refs.showCoinsMessage.showErrorMsg(res.msg)
    },
    // 分页
    handleCurrentChange(currentPage){
      this.showFavoritesVideo(this.favoritesId,currentPage)
    },


    // 表单提交
    onSubmit() {
      // 表单验证
      this.$refs['ruleFormRef'].validate(valid => {
        if (valid) {
          this.updateFavorites()
        }
      })
    },
    // 新增、修改收藏夹
    async updateFavorites() {
      if (this.myFavorites==undefined||this.myFavorites.length<=0) return
      if (this.bgImg !== this.defaultbgImg){
        this.formLabelAlign.imgBase64 = this.bgImg
      }
      // 将序号传给后端（用于新增）
      this.formLabelAlign.rank = parseInt(this.myFavorites[this.myFavorites.length-1].favoritesRank) + 1
      this.formLabelAlign.favoritesPublic = (this.formLabelAlign.favoritesPublic === true) ? 1 : 0
      let res = await this.$util.post('hilihili/favorites/updateFavorites', this.formLabelAlign)
      // console.log('新增、修改收藏夹', res, this.formLabelAlign)
      if (res.code != 200) {
        this.$refs.showCoinsMessage.showErrorMsg('新增或修改错误')
        return
      }
      this.$refs.showCoinsMessage.showErrorMsg(res.msg)
      this.initmyFavorites(false,this.$store.state.userInfo.userId)
      this.formLabelAlign = {}
      this.centerDialogVisible = false
      if (this.formLabelAlign.id != ''){
        if (this.favoritesId == this.updateFavoritesId){
          if (this.bgImg !== this.defaultbgImg){

            this.favoritesItem.imgBase64 = this.bgImg
          }
        }

      }
    },
    // 新增、修改收藏夹时回显数据
    updateMenuItem(item) {
      // console.log(item)
      if (item !== undefined) {
        // 修改
        this.bgImg = this.defaultbgImg
        if (item.favoritesCover != null && item.favoritesCover != ''){
          this.bgImg = item.imgBase64
        }
        this.formLabelAlign = {}
        item.favoritesPublic = (item.favoritesPublic === '1') ? true : false
        this.formLabelAlign = item
        this.centerDialogVisible = true
      } else {
        // 新增
        this.bgImg = this.defaultbgImg
        this.formLabelAlign = {}
        this.formLabelAlign.favoritesPublic = true
        this.centerDialogVisible = true
      }
    },
    // 删除收藏夹
    async deleteFavorites() {
      let res = await this.$util.get('hilihili/favorites/deleteFavorites/' + this.tempFavoritesId, {})
      if (res.code != 200) return
      if (this.favoritesId == this.tempFavoritesId){
        this.favoritesId = this.myFavorites[0].id
        this.clickMenu = this.myFavorites[0].id
      }
      this.$refs.showCoinsMessage.showErrorMsg(res.msg)
      this.initmyFavorites(false,this.$store.state.userInfo.userId)
      this.deleteDialogVisible = false
    },
    // 查询我的创建的收藏夹
    async initmyFavorites(real,createAt) {
      if (createAt === undefined || createAt === null) return
      let res = await this.$util.get('hilihili/favorites/list/' + createAt, {})
      if (res.code != 200) return
      if (res.data === undefined || res.data.length <= 0) return
      res.data.forEach(item => {
        item.favoritesPublicCopy = item.favoritesPublic
        item.favoritesNameCopy = item.favoritesName
      })
      this.myFavorites = res.data
      // 查询默认收藏夹（也是第一个收藏夹）里的视频
      if (real){
        // 初始加载
        this.favoritesId = res.data[0].id
        this.clickMenu = res.data[0].id
        this.favoritesItem = res.data[0]
        this.showFavoritesVideo(res.data[0].id,this.pageNum)
      }else {
        // 增删改
        this.showFavoritesVideo(this.favoritesId,this.pageNum)
      }
    },

    // dialog关闭时的回调
    dialogClose() {
      // console.log('关闭dialog')
      this.formLabelAlign = {}
    },

    // 查询各个收藏夹里的视频
    async showFavoritesVideo(favoritesId,pageNum){
      // debugger
      // console.log('favoritesId',favoritesId)
      this.favoritesId = favoritesId
      let res = await this.$util.get('hilihili/favoritesVideoList/list',
          {favoritesId:favoritesId,startIndex:pageNum,maxCount:this.pageSize})
      // console.log('data',res.data)
      if (res.code != 200) return
      if (res.data.favoritesVideoList === undefined) return
      res.data.favoritesVideoList.forEach(item => {
        if (parseInt(item.likes) >= 10000){
          item.likes = this.$util.numChange(parseInt(item.likes))
        }
        if (parseInt(item.views) >= 10000){
          item.views = this.$util.numChange(parseInt(item.views))
        }
      })
      this.favoritesVideoList = res.data.favoritesVideoList
      this.totalCount = parseInt(res.data.total)
    },
    // 取消订阅
    cancelSubscribe(){

    },
    // 加入稍后再看
    addWatchLater(item){
      console.log('item',item)
    },

  },
}
</script>
<style>
/*修改el-popper样式 在<style scoped>中样式不生效*/
.el-popover.el-popper.el-popover-self{
  min-width: 80px!important;
  padding: 5px 0;
  width: 80px!important;
  background-color: #fff;
}
.el-collapse .el-collapse-item .el-collapse-item__header{
  padding: 0 0 0 20px !important;
}
.el-collapse .el-collapse-item__content{
  padding: 0;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 14px;
  color: #8c939d;
  width: 150px;
  height: 90px;
  line-height: 90px;
  text-align: center;
}
.avatar {
  width: 150px;
  height: 90px;
  display: block;
}
.el-form-item__content .el-upload-list{
  margin: 0;
  display: none;
}
.pagination .el-pagination.is-background .el-pager li.is-active {
  background-color: #00a1d6;
  color: white;
}
</style>
<style scoped>
.cover-span-one{
  display: block;font-size: 14px
}
.cover-span-two{
  display: block;font-size: 12px;color: #999999;margin-top: 8px
}
.cover-main{
  height: 200px;margin: 10px 0
}
.cover-main-cropper{
  width: 60%;height: 200px;float: left;border-radius: 4px;
}
.cover-bom{
  margin-top: 25px;font-size: 12px;color: #999999
}
.cover-reselect{
  color: #999999;font-size: 12px
}
.cover-reselect:hover{
  color: #00a1d6;
}
.show-preview{
  border-radius: 4px;
}
.modal-footer {
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  text-align: center;
}
.cancel-btn {
  color: #6d757a;
  margin-right: 20px;
  border: 1px solid #ccd0d7;
}
.modal-footer .btn {
  cursor: pointer;
  font-size: 12px;
  border-radius: 4px;
  width: 138px;
  height: 38px;
  line-height: 26px;
}
.modal-footer .confirm-btn {
  border: 1px solid #00a1d6;
  background: #00a1d6;
  color: #fff;
}
.upload-cover {
  position: relative;
  width: 114px;
  height: 70px;
  border-radius: 2px;
  cursor: pointer;
  vertical-align: top;
  /*background: url() 50% no-repeat;*/
  background-size: 100% 100%;
}
.clickMenu{
  background-color: #00a1d6 !important;
  color: #fff;
}
.clickMenuSpan{
  color: white !important;
}
.clickSubscribeMenuSpan{
  color: white !important;
}
.clickSubscribeMenu{
  background-color: #00a1d6 !important;
  color: #fff;
}

.span-menu-btn{
  position: absolute;
  top: 0;
  left: 0;
  cursor: move;
  font-size: 14px;
  height: 44px;
  line-height: 44px;
  color: white;
  background-color: #d0d0d2;
  opacity: 0.5;
}
.components-body {
  position: relative;
  display: flex;
  cursor: pointer;
  padding-left: 20px;
  /*justify-content: center;*/
  align-items: center;
  background: white;
  font-size: 12px;
}
.components-body-span{
  width: 120px;
  line-height: 44px;
  vertical-align: middle;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.components-body-right-span{
  float: right;
}
.components-body:hover {
  background-color: #f4f5f7;
}
.components-bpdy-late{
  margin-top: 10px;border-top: 1px solid #ebeef5
}
.caidan-size{
  font-size: 14px;
  color: #d0d0d2;
}
.span-dingyue{
  font-size: 19px;color: #999999;margin-right: 10px
}
.left-main{
  background-color: white;
  min-height: 750px;
  width: 1282px;
}
.ul-dropdown-item{
  list-style: none;
}
.be-dropdown-item-delimiter{
  padding: 5px;
  text-align: center;
  font-size: 13px;
  color: #222;
  cursor: pointer;
}
.be-dropdown-item-delimiter:hover{
  color: #00a1d6;
  background-color: #e5e9ef;
}
/*选中样式*/
.el-menu-item.is-active {
  background-color: #00a1d6 !important;
  color: #fff;
}

.el-menu-item.is-active span {
  color: #fff !important;
}

/**/
.fav-sidenav .el-sub-menu {
  border-bottom: 1px solid #e5e9ef;
}

.fav-sidenav .el-sub-menu__title {
  color: #999999;
}

.deletedialog {
  text-align: center;
}

.item-color-margin {
  color: #99a2aa;
  margin-right: 10px;
  font-size: 20px;
}

.textHidden {
  display: block;
  width: 70%;
  /*以下三行实现在一行中文本超出盒子用省略号表示*/
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.nav-title {
  cursor: pointer;
  position: relative;
  height: 44px;
  padding: 0 20px 0 20px;
  display: flex;
  align-items: center;
}

.nav-title .span-color {
  margin-right: 10px;
  font-size: 20px;
  color: rgb(203, 208, 216);
}

.fav-sidenav {
  position: relative;
  float: left;
  width: 210px;
  font-size: 14px;
  color: #222;
  box-sizing: border-box;
}
.menu-null{
  text-align: center;
}
.fav-main {
  float: left;
  width: 1072px;
  /*左边菜单最小高度*/
  min-height: 750px;
  background-color: white;
  border-left: 1px solid #eee;
}

.section {
  position: relative;
}

.favList-info {
  padding: 20px 0;
  margin: 0 20px;
  box-sizing: border-box;
  border-bottom: 1px solid #e5e9ef;
}

.shadow-first {
  position: absolute;
  width: 154px;
  height: 88px;
  opacity: .8;
  background-color: #e7e7e7;
  border-radius: 4px;
  left: 115px;
  transform: translateX(-50%);
  top: 6px;
}

.shadow-second {
  position: absolute;
  width: 174px;
  height: 100px;
  opacity: .8;
  background: #d4d4d4;
  border-radius: 4px;
  left: 115px;
  transform: translateX(-50%);
  top: 13px;
}

.favInfo-cover {
  /*当图片为空时盒子的背景*/
  background: url('https://images.weserv.nl/?url=https://i0.hdslb.com/bfs/static/jinkela/space/asserts/video-placeholder.png') 50%;
  background-size: cover;
  width: 190px;
  overflow: hidden;
  position: relative;
  text-decoration: none;
  height: 119px;
  object-fit: cover;
  object-position: 50%;
  border-radius: 4px;
}

.favInfo-cover img {
  width: 100%;
  height: 100%;
  background-size: cover;
  object-fit: cover
}

.favInfo-details {
  margin-left: 18px;
}

.favInfo-box {
  height: 119px;
  display: flex;
}

.favInfo-box .favInfo-details .fav-name {
  display: block;
  font-family: PingFangSC-Medium;
  font-size: 14px;
  color: #212121;
  line-height: 17px;
  margin-bottom: 14px;
  width: 368px;
  height: 17px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fav-meta {
  color: #99a2aa;
  font-size: 0;
}

.fav-meta {
  display: block;
  letter-spacing: 0;
  line-height: 16px;
  margin-bottom: 6px;
}

.fav-options {
  display: flex;
  align-items: center;
  margin-top: 16px;
}

.fav-meta span {
  display: inline-block;
  font-size: 12px;
  vertical-align: middle;
}

.fav-up-name {
  margin-right: 20px;
}

.fav-meta .dot {
  margin: 0 8px;
}
.fav-play-main {
  width: 120px;
  height: 32px;
  border-radius: 2px;
  font-size: 14px;
  line-height: 32px;
  text-align: center;
  margin-right: 42px;
  cursor: pointer;
}
.fav-play {
  color: #fff;background: #00a1d6;
}
.fav-play-copy {
  background: #e7e7e7;
  color: #999;
}

.meta {
  font-size: 12px;
  color: #505050;
  line-height: 16px;
  margin-right: 48px;
  cursor: pointer;
}

.metespan {
  margin-left: 5px;
}

.fav-header {
  margin: 20px 20px 0;
}

.fav-info {
  height: 30px;
  margin-top: 15px;
}

.clearfix {
  display: block;
  zoom: 1;
}

.fav-filters {
  float: right;
}

.filter-item {
  float: left;
  line-height: 30px;
  margin-right: 26px;
  font-size: 14px;
  color: #222;
}

.item-icon-style {
  font-size: 12px;
  color: #ccd0d7;
  margin-left: 5px;
}
.search-btn {
  position: absolute;
  right: 1px;
  top: -2px;
  color: #e3e5e7;
  cursor: pointer;
}
.search-btn:hover{
  color: #00a1d6;
}

.be-dropdown {
  position: relative;
  cursor: pointer;
}
.search-types {
  display: inline-block;
  width: 57px;
  line-height: 28px;
  margin-left: 3px;
  font-size: 12px;
  color: #6d757a;
  vertical-align: top;
  text-align: center;
  border-right: 1px solid #ccd0d7;
}
.search-input {
  position: relative;
  display: inline-block;
  width: 148px;
  height: 28px;
  margin: 0 9px 0 11px;
  vertical-align: top;
}
.search-input input {
  border: none;
  outline: none;
  box-shadow: none;
  width: 120px;
  padding: 0;
  font-size: 12px;
  color: #222;
}
.space_input {
  line-height: 25px;
  height: 25px;
  transition: all .3s ease;
  vertical-align: top;
  border-radius: 0;
}

.filter-item.search {
  height: 28px;
  margin: 0;
  font-size: 0;
  border: 1px solid #ccd0d7;
  border-radius: 14px;
  white-space: nowrap;
  transition: border-color .2s ease;
}

.text {
  display: block;
  cursor: pointer;
  vertical-align: middle;
}

.filter-type {
  width: 200px;
  padding: 6px 20px;
}

.be-dropdown-menu {
  position: fixed;
  top: 40px;
  z-index: 10;
  padding: 6px 0;
  background-color: #fff;
  border: 1px solid #e5e9ef;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .14);
}

.be-dropdown-item {
  float: left;
  width: 100px;
  line-height: 36px;
  height: 36px;
  font-size: 0;
  padding: 0;
  text-align: left;
  color: #222;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background-color .2s ease;
  cursor: pointer;
}

.filter-item .filter-type .be-dropdown-item span {
  font-size: 14px;
  color: #222;
}
.fav-video-list {
  margin: 20px 0 30px 20px;
  font-size: 12px;
}
.small-item {
  width: 190px;
  padding: 0;
  margin: 0 20px 20px 0;
  border-radius: 4px;
  border: 1px solid #fff;
  box-sizing: border-box;
  display: block;
  float: left;
  position: relative;
}
.small-item .cover {
  background: url('https://images.weserv.nl/?url=https://i0.hdslb.com/bfs/static/jinkela/space/asserts/video-placeholder.png') 50%;
  background-size: cover;
  border-radius: 4px;
  display: block;
  width: 190px;
  height: 119px;
  overflow: hidden;
  position: relative;
}
.small-item .title {
  /*display: block;*/
  line-height: 20px;
  height: 38px;
  margin-top: 6px;
  display: -webkit-box;/*//对象作为弹性伸缩盒子模型显示*/
  overflow: hidden;/*//溢出隐藏*/
  -webkit-box-orient: vertical;/*//设置伸缩盒子对象的子元素的排列方式*/
  -webkit-line-clamp: 2;/*//设置 块元素包含的文本行数*/

}
.small-item .title:hover {
  color: #00a1d6;
}
.small-item a {
  text-decoration: none;
}

.b-img {
  width: 190px;
  height: 119px;
}
.b-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-size: cover;
}
.length {
  background: rgba(0,0,0,.5);
  border-radius: 5px 0 0 0;
  color: #fff;
  line-height: 20px;
  padding: 0 6px;
  position: absolute;
  right: 0;
  bottom: 0;
}
.i-watchlater {
  position: absolute;
  right: 6px;
  bottom: 14px;
  width: 22px;
  height: 22px;
  z-index: 5;
  border-radius: 4px;
  background: url(https://images.weserv.nl/?url=https://i0.hdslb.com/bfs/static/jinkela/space/asserts/watchlater-1.svg) rgba(33,33,33,.8) 50%/contain no-repeat;
}
.meta-mask {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  opacity: 0;
  background-color: rgba(0,0,0,.45);
  color: #e5e9ef;
  transition: opacity .2s ease;
}
.meta-mask:hover{
  cursor:pointer;
  opacity: 1;
}
.meta-info {
  position: absolute;
  top: 50%;
  left: 15px;
  transform: translateY(-50%);
}
/*视频失效样式*/
.disabled-cover {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  text-align: center;
  font-size: 14px;
  cursor: default;
  background: #e5e9ef;
  color: #99a2aa!important;
}
.meta.pubdate {
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.small-item .meta {
  color: #999;
  white-space: nowrap;
  font-size: 12px;
  margin-top: 5px;
  height: 16px;
  line-height: 16px;
}
.be-dropdown-trigger {
  cursor: pointer;
  color: #999999;
  position: absolute;
  bottom: 1px;
  right: -14px;
}
.be-dropdown-trigger i{
  font-size: 10px;
}
.pagination{
  display: flex;
  padding: 20px 0 50px 0;
}
.pagination-auto{
  margin: auto;
}
.more-menu{
  display: inline-block;width: 40px;height: 44px;line-height: 44px;
}
</style>
